body {
    font-family:Arial, sans-serif;
    margin:0;
    padding:0;
    color: #111414;
    background-color: #f4f4f4;
    overscroll-behavior: none;
}

h1 {
    color: 010208;
    font-size: 4.792vw;
    text-align: left;
    font-weight: 900;
}

h2 {
    color: 010208;
    font-size: 2.344vw;
    text-align: left;
    font-weight: 700;
}

h3 {
    color: 010208;
    font-size: 1.458vw;
    text-align: Left;
    font-weight:500;
}

.h3 {
    color: 010208;
    font-size: 1.458vw;
    text-align: Left;
    font-weight:500;
}

.h3.spacing {
    margin-bottom: 10px;
}

h4 {
    color: 010208;
    font-size: 1.146vw;
    text-align: Left;
    font-weight:700;
}

.h4_resume {
    color: 111414;
    font-size: 1.146vw;
    text-align: Left;
    font-weight:500;
}

.external_link {
    width: 1.25em;
    padding-left: 0.3em;
    margin-bottom:-0.2em;
}

.h4_resume.spacing {
    margin-bottom:10px;
}

.h4_resume:hover {
    color: rgb(105,105,105);
    cursor: pointer;
}

.h4_grey {
    color:rgb(105,105,105);
}

.CV_Lists_Other {
    color: 111414;
    font-size: 1.146vw;
    text-align: Left;
    font-weight:500;
    margin-bottom: 0.3em;
}

.h3.spacing:hover {
    color: rgb(105,105,105);
    cursor: pointer;
}

.h3_grey {
    color:rgb(105,105,105);
}

.Bold {
    font-weight: 700;
}

.Regular {
    font-weight: 500;
}

.Regular.Grey {
    color:rgb(105,105,105);
}

.Grid_Icon {
    width: 25%;
    height:25%;
    border-radius: 7.5%;
    display: inline;
}

.Icons_75px {
    width: 5%;
    border-radius: 1.5%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: auto;
}

.Flavicon_75px {
    width: 5%;
    border-radius: 10%;
    position: absolute;
    top: 3em;
    left: 0;
    right: auto;
}

.Icons_45px {
    width: 5%;
    height:5%;
    border-radius: 10%;
    float:right;
    margin: 0.5em 0 1em 0.5em;
}

.CV_Social_Icons {
    width: 25%;
    border-radius: 10%;
    float:right;
    margin: 0.5em 0 1em 0.5em;
}

.landing_div {
    display:block;
    margin: 0 3em 3em 3em;
    max-width: 100%;
    height: 100vh;
    position: relative;
    }

.Project_page_div {
    display:block;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 75px;
    max-width: 100%;
    max-height: 2700px;
    background-color: aquamarine;
    padding-left: 75px;
    padding-right: 75px;
    }

.Project_div {
    max-width: 100%;
    max-height: 1150px;
    }

.Project_Page_Row {
    max-width:100%;
    height: fit-content;
    background-color: aqua;
}

.Project_Page_Column {
    max-width: 100vw;
    margin-left:5em;
    margin-right:5em;
    height:100%;
    z-index: 1;
    background-color: rgb(255, 251, 0);
}

.Hero_Image {
    width: 100%;
    height: fit-content;
    border-radius: 3%;
    cursor: pointer;
    vertical-align: top;
    transition: .2s; /*zoom animation*/
}

.Hero_Image:hover {
    transform: scale(1.02);
}

.Hero_Image_Long {
    width: 100%;
    height: 87.5%;
    border-radius: 3%/1.5%;
    cursor: pointer;
    vertical-align: top;
}

.About_div {
margin: 0;
max-width: 1180px;
height: 1400px;
cursor: pointer;
}

.About_Hero_Image {
max-width: 1180px;
padding-top: 0px;
margin-top: 0px;
border-radius: 15px;
}

.Project_Spread {
    width: 1620px;
    height: 5000;
    z-index: -1;

}

.modal-container {
    position: fixed;
    background-color: #0d0d0ddc;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
    overflow: scroll;
    cursor: pointer;
    z-index: 2;
    overscroll-behavior: none;
}

.modal {
    background-color: #f4f4f4;
    width: 70%;
    height: fit-content;
    border-radius: 1.5em;
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em;
    cursor: default;
}

.Close_Modal {
    cursor: pointer;
    text-align: center;
    color: rgb(105,105,105);
    bottom: 0;
    position: relative;
    padding-bottom:3%;
}

.Close_Modal_Button {
    width: 3%;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.Close_Modal_Button:hover {
    cursor: pointer;
}

.gallery_iamge_1 {
    width: 100%;
    height: auto;
    border-radius: 1em;
    margin-top:5%;
    margin-bottom:3%;
}

.gallery_iamge_2 {
    width: 40%;
    height: auto;
    border-radius: 1em;
    display: inline;
    margin-bottom:3%;
}

.gallery_iamge_3 {
    width: 56.5%;
    height: auto;
    border-radius: 1em;
    display: inline;
    margin-bottom:3%;
    float:right;
}

.gallery_iamge_4 {
    width: 100%;
    height: auto;
    border-radius: 1em;
    margin-bottom:3%;
}

.gallery_about {
    width: 100%;
    height: fit-content;
    margin-bottom: 3%;
}

.About_Text {
    max-width:35%;
    font-weight: 500;
    position: relative;
    margin-left: auto;
    margin-right: 0;
    color:rgb(105,105,105);
    display: inline;
    float: right;
}

.About_Text_Carousel {
    width: 100%;
    color: rgb(118, 117, 117);
    font-size: 1.458vw;
}

.About_Information {
    width: 35%;
    font-weight: 500;
    position: relative;
    text-align: left;
    font-size: 1.146vw;
    list-style-type: none;
    padding-left: 0;
    display: inline-block;
}

.Landing_About_Information {
    width: 50%;
    font-weight: 500;
    position: relative;
    text-align: left;
    font-size: 1.458vw;
    list-style-type: none;
    padding-left: 0;
    display: inline-block;
    margin-top:-1%;
}

.About_Icon {
    width: 7.5%;
    position: relative;
    margin-right: auto;
    margin-left: 0;
    display: inline;
    border-radius: 5%;
}

.About_Title {
    position: relative;
    margin-left: 10%;
    margin-top: -5.5%;
}

.List_Bold {
    font-weight: 700;
}

.List_Bold_Big {
    font-weight: 700;
    font-size: 45px;
}

.column {
    padding-top: 2%;
    padding-bottom: 2%;
}

.row {
    display: inline-block;
    position: relative;
    width: 100%;
    justify-content: center;
    margin-top: 5%;

  }

  .Gallery_Icons_75px {
    width: 15%;
    border-radius: 10%;
    margin-left: 1%;
    margin-right: 1%;
}

.resume {
    background-color: #f4f4f4;
    width: 1620px;
    height: 2000px;
    border-radius: 15px;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 150px;
    cursor: default;
}

.modal_resume {
    background-color: #f4f4f4;
    width: 1620px;
    height: 2000px;
    border-radius: 15px;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 150px;
    cursor: default;
    padding: 75px 75px 75px 75px;
}

.modal_BCDG {
    background-color: #f4f4f4;
    width: 1620px;
    height: 2275px;
    border-radius: 15px;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 150px;
    cursor: default;
    padding: 75px 75px 75px 75px;
}

.Resume_Blurb {
    max-width: 66%;
    justify-content: left;
    text-align: justify;
    display: block;
    font-weight: 500;
}

.Resume_Tag_Line {
    float: right;
    max-width: 35%;
    display: inline;
    font-size: 1.75vw;
}

.Resume_Skills.Bold {
    font-weight: 700;
    width: 650px;
    display: inline-block;
}

.Resume_Learning.Bold {
    position: relative;
    font-weight: 700;
    margin-left: 730px;
    margin-top: -330px;
    width: 500px;
    padding-bottom: 300px;
}

.Resume_Name {
    width: 60%;
    position: relative;
    margin-bottom: 2%;
    font-size: 3.5vw;
}

.Resume_Name_Kelton {
    width: 60%;
    position: relative;
    margin-top: 0;
    margin-bottom: -7.5%;
    font-size: 3.5vw;
}

.Resume_Contact_Info {
    padding: 0 0  0 0;
    margin: 0 0 2% 0;
    width: 50%;

}

.Resume_Contact_Info.Bold {
    padding: 0 0  0 0;
    margin: 0 0 0 0;
    width: 50%;
}

.Resume_Experience {
    list-style-type: none;
    padding-left: 0;
    width: fit-content;
}

.Resume_Socials {
    margin-top: 5%;
    float: right;
    width: 20%;
}

.dot.active {
    background-color: #111414;
    border: 2px solid #111414;
}


.Image_Container {
    height: 575px;
    width: 575px;
    overflow: hidden;
    
}

.Image_Wrapper {
    display: inline;
    animation: slide 20s infinite;
}

.About_Container {
    height: 20em;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background-color: aqua;
}

.About_Wrapper {
    display: inline-flex;
    width: 60vw;
    overflow: hidden;
    /*animation: slide 20s infinite;*/ 
}

.About_Wrapper > div {
    width:100%;
}

.SKills_List_Text {
    display: inline;
    width: 100px;
    font-weight: 500;
    position: relative;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    font-size: 22px;
    list-style-type: none;
    padding-left: 0;
}

.Dots_Container{
    width: 100px;
    height: 13px;
    margin-left: 237.5px;
    margin-top: 30px;
}

.Dots_Container_Landing{
    width: 100px;
    height: 13px;
    position: relative;
    left: 30%;

}

.Dot_Wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.Black_Dot {
    height:15px;
    width: 15px;
    background-color: #111414;
    border: 2px solid #111414;
    border-radius: 50%;
    display: block;
    z-index: 1;
    position: absolute;
    margin: -3px 7.5px 0 -3px;
    animation: dotslide 20s infinite;
}

.dot {
    height:10px;
    width: 10px;
    background-color: #f4f4f4;
    border: 2px solid rgb(105,105,105);
    border-radius: 50%;
    display: inline-block;
    z-index: 0;

}

a:link {
    color: #111414;
    text-decoration: none;
}

a:visited {
    color: #111414;
    text-decoration: none;
}

a:hover {
    color: rgb(105,105,105);
}

.Experience_Image {
    width: 38%;
    margin-top: 60px;
    border-radius: 3%;
    right:0;
    float: right;
    display: none;
    position:absolute;
    margin-right: 3%;
    z-index: 0;
}

.Experience_Image_Close_Button {
    width: fit-content;
    height: fit-content;
    color: #111414;
    font-size: 3vw;
    font-weight: 500;
    align-content: center;
    content: ' \00d7';
    margin-top: 4%;
    margin-right: 0;
    float:right;
    display: none;
}

.Experience_Image_Close_Button:hover {
    opacity: 50%;
    cursor: pointer;
}

.Image_Credit {
    font-weight: 500;
    font-size: 1.146vw;
    color: rgb(105,105,105);
    display: none;
    z-index: 2;
}

.item_span_two_rows {
    grid-row: span 2;
}



.Landing_Desctiptive_Text {
    width: 30%;
    height: fit-content;
    margin-left: 75px;
    position: absolute;
    right:5%;
    top:0;
}

.Landing_Name {
    height: fit-content;
    width: 100%;
    position: absolute;
    top:25vh;
    left:5%;
}

.Project_Home_Grid {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    grid-gap:3em;
    margin-left: 3em;
    margin-right:3em;
    margin-bottom: 3em;
}

.CV_Skills_Column_1 {
    width: 40%;
    height: 100%;
    display: inline-block;
}

.CV_Skills_Column_2 {
    width: 30%;
    height: 100%;
    display: inline-block;
}

.CV_Skills_Column_3 {
    width: 26%;
    height: 100%;
    display: inline-block;
}

.CV_Skills_Container {
    display: inline-block;
    width: 40%;
    height: fit-content;
}


/*For Tablets */
@media only screen and (max-width: 1000px) {
    body{
        font-family:Arial, sans-serif;
        margin:0;
        padding:0;
        color: #111414;
        background-color: #f4f4f4;
        overscroll-behavior: none;
    }
    
    h1 {
        color: 010208;
        font-size: 7.188vw;
        text-align: left;
        font-weight: 900;
    }
    
    h2 {
        color: 010208;
        font-size: 3.516vw;
        text-align: left;
        font-weight: 700;
    }

    h3 {
        color: 010208;
        font-size: 2.187vw;
        text-align: Left;
        font-weight:500;
    }
    
    h4 {
        color: 010208;
        /*font-size: 22px;*/
        font-size: 1.6vw;
        text-align: Left;
        font-weight:700;
    }

    .Landing_Desctiptive_Text {
        width: 60%;
        height: fit-content;
        margin-left: 0;
        position: absolute;
        right:auto;
        margin-top:50%;
    }

    .Flavicon_75px {
        width: 10%;
        border-radius: 10%;
        position: absolute;
        top: 3em;
        left: 0;
        right: auto;
    }

    .Icons_45px {
        width: 5%;
        height:5%;
        border-radius: 10%;
        float:right;
        margin: 0.5em 0 1em 0.5em;
    }

    .CV_Social_Icons {
        width: 20%;
        border-radius: 10%;
        float:right;
        margin: 0.25em 0 0.5em 0.25em;
    }

    .Landing_Name {
        height: fit-content;
        width: 100%;
        position: absolute;
        top:30vh;
        left:0;
    }

    .About_Wrapper {
        display: inline-flex;
        width: 60vw;
        overflow: hidden;
        /*animation: slide 20s infinite;*/ 
    }

    .Landing_About_Information {
        width: 100%;
        font-weight: 500;
        position: relative;
        text-align: left;
        font-size: 2.916vw;
        list-style-type: none;
        padding-left: 0;
        display: inline-block;
        margin-top:-1%;
    }

    .About_Text_Carousel {
        width: 100%;
        color: rgb(105,105,105);
        font-size: 2.187vw;
    }

    .About_Text {
        max-width:40%;
        font-weight: 500;
        position: relative;
        margin-left: auto;
        margin-right: 0;
        color:rgb(105,105,105);
        display: inline;
        float: right;
        font-size: 1.146vw;
    }

    .About_Title {
        position: relative;
        margin-left: 10%;
        margin-top: -7%;
        font-size: 3.5vw;
    }

    .gallery_iamge_1 {
        width: 100%;
        height: auto;
        border-radius: 1em;
        margin-top:6%;
        margin-bottom:3%;
    }
    
    .gallery_iamge_2 {
        width: 40%;
        height: auto;
        border-radius: 1em;
        display: inline;
        margin-bottom:3%;
    }
    
    .gallery_iamge_3 {
        width: 56.5%;
        height: auto;
        border-radius: 1em;
        display: inline;
        margin-bottom:3%;
        float:right;
    }
    
    .gallery_iamge_4 {
        width: 100%;
        height: auto;
        border-radius: 1em;
        margin-bottom:3%;
    }

    .modal {
        background-color: #f4f4f4;
        width: 80%;
        height: fit-content;
        border-radius: 1em;
        margin-top: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10%;
        cursor: default;
    }

    .Resume_Name {
        width: 60%;
        position: relative;
        margin-bottom: 2%;
        font-size: 4vw;
    }
    
    .Resume_Name_Kelton {
        width: 60%;
        position: relative;
        margin-top: 0;
        margin-bottom: -5%;
        font-size: 4vw;
    }

    .h4_resume {
        color: 010208;
        /*font-size: 22px;*/
        font-size: 1.458vw;
        text-align: Left;
        font-weight:500;
    }

    .CV_Lists_Other {
        color: 111414;
        font-size: 1.458vw;
        text-align: Left;
        font-weight:500;
        margin-bottom: 0.3em;
    }
    .Bold {
        font-weight: 700;
    }
    
}


/*For Phones */
@media only screen and (max-width: 600px) {
    body{
        font-family:Arial, sans-serif;
        margin:0;
        padding:0;
        color: #111414;
        background-color: #f4f4f4;
        overscroll-behavior: none;
    }

    h1 {
        color: 010208;
        font-size: 14.376vw;
        text-align: left;
        font-weight: 900;
    }
    
    h2 {
        color: 010208;
        font-size: 7.032vw;
        text-align: left;
        font-weight: 700;
    }

    h3 {
        color: 010208;
        font-size: 4.374vw;
        text-align: Left;
        font-weight:500;
    }
    
    h4 {
        color: 010208;
        /*font-size: 22px;*/
        font-size: 2.6vw;
        text-align: Left;
        font-weight:700;
    }

    .Landing_Desctiptive_Text {
        width: 100%;
        height: fit-content;
        margin-left: 0;
        position: absolute;
        right:auto;
        margin-top:45vh;
    }

    .Flavicon_75px {
        width: 15%;
        border-radius: 10%;
        position: absolute;
        top: 3em;
        left: 0;
        right: auto;
    }

    .Icons_45px {
        width: 10%;
        height:10%;
        border-radius: 10%;
        float:right;
        margin: 0.5em 0 1em 0.5em;
    }

    .CV_Social_Icons {
        width: 25%;
        border-radius: 10%;
        float:right;
        margin: 0.25em 0 0.5em 0.25em;
    }

    .Landing_Name {
        height: fit-content;
        width: 100%;
        position: absolute;
        top:15vh;
        left:0;
    }

    .About_Wrapper {
        display: inline-flex;
        width: 60vw;
        overflow: hidden;
        /*animation: slide 20s infinite;*/ 
    }

    .Landing_About_Information {
        width: 100%;
        font-weight: 500;
        position: relative;
        text-align: left;
        font-size: 2.916vw;
        list-style-type: none;
        padding-left: 0;
        display: inline-block;
        margin-top:-1%;
    }

    .About_Text_Carousel {
        width: 100%;
        color: rgb(105,105,105);
        font-size: 4.374vw;
    }

    .About_Text {
        max-width:40%;
        font-weight: 500;
        position: relative;
        margin-left: auto;
        margin-right: 0;
        color:rgb(105,105,105);
        display: inline;
        float: right;
        font-size: 2.292vw;
    }

    .About_Title {
        position: relative;
        margin-left: 10%;
        margin-top: -8%;
        font-size: 5vw;
    }

    .gallery_iamge_1 {
        width: 100%;
        height: auto;
        border-radius: 0.5em;
        margin-top:6%;
        margin-bottom:3%;
    }
    
    .gallery_iamge_2 {
        width: 40%;
        height: auto;
        border-radius: 0.5em;
        display: inline;
        margin-bottom:3%;
    }
    
    .gallery_iamge_3 {
        width: 56.5%;
        height: auto;
        border-radius: 0.5em;
        display: inline;
        margin-bottom:3%;
        float:right;
    }
    
    .gallery_iamge_4 {
        width: 100%;
        height: auto;
        border-radius: 0.5em;
        margin-bottom:3%;
    }

    .modal {
        background-color: #f4f4f4;
        width: 95%;
        height: fit-content;
        border-radius: 1em;
        margin-top: 2.5%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2.5%;
        cursor: default;
    }

    .Resume_Name {
        width: 80%;
        position: relative;
        margin-bottom: 2%;
        font-size: 7vw;
    }
    
    .Resume_Name_Kelton {
        width: 80%;
        position: relative;
        margin-top: 0;
        margin-bottom: -5%;
        font-size: 7vw;
    }

    .h4_resume {
        color: 010208;
        /*font-size: 22px;*/
        font-size: 2.6vw;
        text-align: Left;
        font-weight:500;
    }

    .CV_Lists_Other {
        color: 111414;
        font-size: 2.6vw;
        text-align: Left;
        font-weight:500;
        margin-bottom: 0.3em;
    }
    .Bold {
        font-weight: 700;
    }
    
    .Project_Home_Grid {
        width: fit-content;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap:1em;
        margin-left: 3em;
        margin-right:3em;
        margin-bottom: 3em;
    }

    .h3 {
        color: 010208;
        font-size: 3.6vw;
        text-align: Left;
        font-weight:500;
    }

    .Gallery_Icons_75px {
        width: 27.5%;
        border-radius: 10%;
        margin-left: 1%;
        margin-right: 1%;
    }

    .column {
        padding-top: 1%;
        padding-bottom: 1%;
    }

    .About_Information {
        width: 30%;
        font-weight: 500;
        position: relative;
        text-align: left;
        font-size: 2.292vw;
        list-style-type: none;
        padding-left: 0;
        display: inline-block;
    }

    .Resume_Blurb {
        max-width: 80%;
        justify-content: left;
        text-align: justify;
        display: block;
        font-weight: 500;
    }

    .Resume_Tag_Line {
        float: right;
        max-width: 35%;
        display: none;
        font-size: 1.75vw;
    }

    .Resume_Socials {
        margin-top: 3%;
        float: right;
        width: 30%;
    }
    
    .Close_Modal_Button {
        width: 3%;
        margin-left:auto;
        margin-right:auto;
        display:block;
        padding-top:7.5%;
    }

    .CV_Skills_Column_1 {
        width: 40%;
        height: 100%;
        display: inline-block;
    }
    
    .CV_Skills_Column_2 {
        width: 25%;
        height: 100%;
        display: inline-block;
    }
    
    .CV_Skills_Column_3 {
        width: 20%;
        height: 100%;
        display: inline-block;
    }

    .CV_Skills_Container {
        display: inline-block;
        width: 35%;
        height: fit-content;
    }
}